<!---差旅行程-->
<template>
  <div>
    <el-button
      v-if="!disabled"
      size="mini"
      plain
      type="primary"
      class="el-icon-connection"
      @click="showDialog()"
    >添加行程</el-button>
    <div>
      <el-card
        v-for="(item,index) in dataList"
        :key="index"
        class="box-card"
        shadow="hover"
      >
        <div class="padding-lr-sm bold border-bottom bg-blue-light flex-between text-normal bg-grey light">
          <span class="bold">{{ item.OutBeginDate }}</span>
          <el-button
            v-if="!disabled"
            style="float: right; padding: 3px 0;"
            type="text"
            @click="deleteItem(index)"
          ><i class="el-icon-delete" /></el-button>
        </div>

        <el-main class="flex-between">
          <div>
            <div class="flex">
              <div class="text-xl bold margin-lr-sm">{{ item.OutAddressShow }}-{{ item.DestinationAddressShow }}</div>
              <el-tag type="success" size="mini" class="margin-lr-sm"> {{ item.OutReturn==1?"往返":"单程" }} </el-tag>
              <el-tag size="mini">  {{ item.TravelMethod }}</el-tag>
            </div>
            <div class="content"> <el-tag size="mini" type="info"> {{ item.OutBeginDate }}</el-tag> - <el-tag size="mini" type="info"> {{ item.OutEndDate }}</el-tag></div>
          </div>
          <div>
            <div class="title" />
            <div class="text-xl bold">
              {{ item.OutDayNum }} 天
            </div>
          </div>
        </el-main>
      </el-card>
    </div>
    <el-dialog
      title="编辑行程"
      :visible.sync="dialogVisible"
      width="50%"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-container>
        <el-main class="elmiancalss">
          <el-form
            ref="dataForm"
            :rules="rules"
            :model="temp"
            label-width="100px"
          >
            <el-form-item
              label="出行方式"
              prop="TravelMethod"
            >
              <el-select
                v-model="temp.TravelMethod"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in travelMethodOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="出发地点"
              prop="OutAddressCode"
            >
              <el-cascader
                ref="OutAddressRef"
                v-model="temp.OutAddressCode"
                :options="AreaData"
                :props="regionprops"
                placeholder="选择地区"
                clearable
                separator="-"
                @change="handleOutAddressChange()"
              />
            </el-form-item>
            <el-form-item
              label="目的地点"
              prop="DestinationAddressCode"
            >
              <el-cascader
                ref="DestinationAddressRef"
                v-model="temp.DestinationAddressCode"
                :options="AreaData"
                :props="regionprops"
                separator="-"
                placeholder="选择地区"
                @change="handleDestinationAddressChange()"
              />
            </el-form-item>
            <el-form-item
              label="开始日期"
              prop="OutBeginDate"
            >
              <el-date-picker
                v-model="temp.OutBeginDate"
                type="date"
                value-format="yyyy-MM-dd"
                start-placeholder="请选择开始日期"
                @change="computeDayNum"
              />
            </el-form-item>
            <el-form-item
              label="结束日期"
              prop="OutEndDate"
            >
              <el-date-picker
                v-model="temp.OutEndDate"
                type="date"
                value-format="yyyy-MM-dd"
                start-placeholder="请选择结束日期"
                @change="computeDayNum"
              />
            </el-form-item>
            <el-form-item
              label="出差天数"
              prop="OutDayNum"
            >
              <el-input
                v-model="temp.OutDayNum"
                disabled
              />
            </el-form-item>
            <el-form-item
              label="单程/往返"
              prop="OutReturn"
            >
              <el-radio-group v-model="temp.OutReturn">
                <el-radio :label="0">单程</el-radio>
                <el-radio :label="1">往返</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-main>
        <el-footer>
          <div>
            <el-button
              size="medium"
              @click="onCancel"
            >返回</el-button>
            <el-button
              type="primary"
              size="medium"
              @click="onSubmit(false)"
            >保存</el-button>
            <el-button
              type="primary"
              size="medium"
              @click="onSubmit(true)"
            >保存并新增</el-button>
          </div>
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>
<script>
import { compareDateToBool, getDaysBetween } from '@/utils/datetime'
import { getRegionTree } from '@/api/region'
export default {
  components: {},
  props: {
    data: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: Object
    },
    formConfig: {
      type: Object,
      default: Object
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    var checkBeginDate = (rule, value, callback) => {
      if (value !== '') {
        if (
          this.temp.OutEndDate !== '' &&
          new Date(value) > new Date(this.temp.OutEndDate)
        ) {
          return callback(new Error('开始日期必须小于结束日期'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var checkEndDate = (rule, value, callback) => {
      if (value !== '') {
        if (
          this.temp.OutBeginDate !== '' &&
          new Date(value) < new Date(this.temp.OutEndDate)
        ) {
          return callback(new Error('结束日期必须大于等于开始日期'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      dataList: this.data, // 添加行程界面数据集
      temp: {
        TravelMethod: '', // 出行方式
        OutAddress: '', // 出发地
        OutAddressCode: '', // 出发地 要保存的地址代码
        OutAddressShow: '', // 出发地  显示
        DestinationAddress: '', // 目的地
        DestinationAddressCode: '', // 目的地  要保存的地址代码
        DestinationAddressShow: '', // 目的地  显示
        OutBeginDate: '', // 开始日期
        OutEndDate: '', // 结束日期
        OutDayNum: 0, // 出差天数
        OutReturn: 1 // 单程/往返  默认是往返回
      },
      AreaData: [], // 选择出发地和目的地的集合

      travelMethodOptions: [
        {
          value: '飞机',
          label: '飞机'
        },
        {
          value: '火车',
          label: '火车'
        },
        {
          value: '客车',
          label: '客车'
        },
        {
          value: '轮船',
          label: '轮船'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      regionprops: {
        expandTrigger: 'hover',
        lazy: true,
        lazyLoad(node, resolve) {
          const nodes = node.children
          node.children = []
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(nodes)
        }
      },
      rules: {
        OutAddressCode: [
          {
            type: 'array',
            required: true,
            message: '请选择出发地',
            trigger: 'change'
          }
        ],
        DestinationAddressCode: [
          {
            type: 'array',
            required: true,
            message: '请选择目的地',
            trigger: 'change'
          }
        ],
        TravelMethod: [
          {
            required: true,
            message: '请选择出行方式',
            trigger: 'change'
          }
        ],
        OutBeginDate: [
          { required: true, message: '请选择开始日期', trigger: 'blur' },
          { validator: checkBeginDate, trigger: 'blur' }
        ],
        OutEndDate: [
          { required: true, message: '请选择结束日期', trigger: 'blur' },
          { validator: checkEndDate, trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.dataList = this.data
      }
    }
  },
  created() {
    this.loadAreaData()
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    onCancel() {
      this.dialogVisible = false
      this.$refs['dataForm'].clearValidate() // 清除所有验证
    },
    onSubmit(isShow) {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.dataList.push(this.temp)
          this.$emit('update:data', this.dataList)
          this.initFormData()
          this.dialogVisible = isShow
          this.$refs['dataForm'].clearValidate() // 清除所有验证
        }
      })
    },
    // 添加行程
    handleAdd: function() {
      this.initFormData()
    },
    initFormData: function() {
      this.temp = {
        TravelMethod: '', // 出行方式
        OutAddress: '', // 出发地
        OutAddressCode: '', // 出发地 要保存的地址代码
        OutAddressShow: '', // 出发地  显示
        DestinationAddress: '', // 目的地
        DestinationAddressCode: '', // 目的地  要保存的地址代码
        DestinationAddressShow: '', // 目的地  显示
        OutBeginDate: '', // 开始日期
        OutEndDate: '', // 结束日期
        OutDayNum: 0, // 出差天数
        OutReturn: 1 // 单程/往返
      }
    },

    handleOutAddressChange() {
      this.temp.OutAddress = this.$refs['OutAddressRef']
        .getCheckedNodes()[0]
        .pathLabels.join(',')
      this.temp.OutAddressShow = this.$refs[
        'OutAddressRef'
      ].getCheckedNodes()[0].label
    },
    handleDestinationAddressChange() {
      this.temp.DestinationAddress = this.$refs['DestinationAddressRef']
        .getCheckedNodes()[0]
        .pathLabels.join(',')
      this.temp.DestinationAddressShow = this.$refs[
        'DestinationAddressRef'
      ].getCheckedNodes()[0].label
    },

    // 计算出差天数
    computeDayNum: function() {
      var beginDate = this.temp.OutBeginDate
      var endDate = this.temp.OutEndDate
      // 都有值了才计算
      if (beginDate !== '' && endDate !== '') {
        if (compareDateToBool(beginDate, endDate)) {
          this.$message.warning('对不起结束日期不能大于开始日期!')
          return
        }
        this.temp.OutDayNum = getDaysBetween(beginDate, endDate)
      }
    },
    // 删除某一行程
    deleteItem: function(index) {
      this.dataList.splice(index, 1)
      this.$emit('update:data', this.dataList)
    },
    loadAreaData() {
      this.$nextTick(() => {
        getRegionTree().then(res => {
          this.AreaData = res.Data
        })
      })
    }
  }
}
</script>

<style scoped>
.el-cascader{
  width: 100%;
}
</style>
